<script setup>
import * as echarts from 'echarts'
import mapJson from '../assets/MapData/china.json'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  msg: String,
  data: {
    type: Object,
    required: true
  }
})
console.log('props=>data', props.data)
// 1.初始化echarts实例
let myChart = null
const target = ref(null)

onMounted(() => {
  echarts.registerMap('china', mapJson)
  myChart = echarts.init(target.value)
  renderChart()
})

// 2.构建option配置对象
const renderChart = () => {
  const options = {
    timeline: {
      data: props.data.voltageLevel,
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      left: '10%',
      right: '10%',
      bottom: '0%',
      width: '80%',
      label: {
        normal: {
          textStyle: {
            color: '#ddd'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      symbolSize: 10,
      lineStyle: {
        color: '#555'
      },
      checkpointStyle: {
        borderColor: '#888',
        borderWidth: 2
      },
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        normal: {
          color: '#666',
          borderColor: '#666'
        },
        emphasis: {
          color: '#aaa',
          borderColor: '#888'
        }
      }
    },
    baseOption: {
      grid: {
        right: '2%',
        top: '10%',
        bottom: '10%',
        width: '20%'
      },
      geo: {
        show: true,
        map: 'china',
        roam: true,
        zoom: 0.8,
        left: 'center',
        center: [113.83531246, 34.0267395887],
        itemStyle: {
          normal: {
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(147, 235, 248, 0.2)'
                }
              ]
            }
          },
          emphasis: {
            areaColor: '#389BB7',
            borderWidth: 0
          }
        }
      }
    },
    options: []
  }
  props.data.voltageLevel.forEach((item, index) => {
    options.options.push({
      backgroundColor: '#142047',
      title: [
        {
          text: '2019-2024 年度数据统计',
          left: '1%',
          top: '1%',
          textStyle: {
            color: '#ccc',
            contSize: 30
          }
        },
        {
          id: 'statistic',
          text: item + '年数据统计情况',
          right: '1%',
          top: '1%',
          textStyle: {
            color: '#ccc',
            fontSize: 20
          }
        }
      ],
      xAxis: {
        type: 'value',
        scale: true,
        position: 'top',
        splitLine: {
          show: false
        },
        axisTick:{
          show: false
        },
        axisLabel: {
          margin: 2,
          textStyle: {
            color: '#aaa'
          }
        }
      },
      yAxis: {
        type: 'category',
        axisLine: {
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        axisTick:{
          show: false
        },
        axisLabel: {
          margin: 0,
          textStyle: {
            color: '#ddd'
          }
        },
        data: props.data.categoryData[item].map(item => item.name)
      },
      series: [
        {
           type: 'bar',
           zlevel: 1.5,
           itemStyle: {
            normal: {
              color: props.data.colors[index]
            }
           },
           data: props.data.categoryData[item].map((item) => item.value)
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: props.data.topDate[item],
          symbolSize: function (val) {
            return val[2] / 4
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: props.data.colors[index],
              shadowBlur: 5,
              shadowColor: props.data.colors[index]
            }
          }
        }
      ]
    })
  });
  // 3. 通过实例setOptions(options)
  myChart.setOption(options)
}

watch(
  () => props.data,
  () => {
    renderChart()
  }
)
</script>

<template>
  <div>
    <!-- bg-[#38bdf8]" -->
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
